<script>

import * as echarts from 'echarts';
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

// import $ from 'jquery'
export default {
  name: 'VisualizationEight',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.get('/api/vis/data8', {}).then(res => {
        if (res.data.code === 20041) {
          let data1 = [];
          for (let i = 0; i < res.data.data.length; i++) {
            if(res.data.data[i].param2 >= 0) {
              data1.push(
                  {
                    name: res.data.data[i].param1,
                    value: res.data.data[i].param2,
                  },
              );
            }
          }
          this.init(data1)
        }
      }).catch(error => {
        this.open4(error);
      })
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    init(datas) {
      var chartDom = document.getElementById('main8');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '热门物流词云',
        },
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 30
          }
        },
        series: [{
          type: "wordCloud",
          // 网格大小，各项之间间距
          gridSize: 60,
          // 形状 circle 圆，cardioid  心， diamond 菱形，
          // triangle-forward 、triangle 三角，star五角星
          shape: 'circle',
          // 字体大小范围
          sizeRange: [20, 70],
          // 文字旋转角度范围
          rotationRange: [0, 0],
          // 旋转步值
          // rotationStep: 90,
          // 自定义图形
          // maskImage: maskImage,
          left: 'center',
          top: 'center',
          right: null,
          bottom: null,
          // 画布宽
          width: '90%',
          // 画布高
          height: '80%',
          // 是否渲染超出画布的文字
          drawOutOfBound: false,
          textStyle: {
            normal: {
              color: function() {
                return 'rgb(' + [
                  Math.round(Math.random() * 200 + 55),
                  Math.round(Math.random() * 200 + 55),
                  Math.round(Math.random() * 200 + 55)
                ].join(',') + ')';
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#2ac'
            }
          },
          data: datas
        }]
      };

      option && myChart.setOption(option);

    }
  }

}
</script>

<template>
  <div id="main8"></div>
</template>

<style scoped>
#main8 {
  width: 100%;
  height: 100%;
}
</style>